<d-tabs type="slider" [(activeTab)]="tabActiveId" (activeTabChange)="activeTabChange($event)">
  <d-tab *ngFor="let item of tabItems" [id]="item.id" [title]="item.title"></d-tab>
</d-tabs>
<div class="adaptive-box" [style.width]="width">
  <d-input-group [prefixContent]="'components.input-group.responsiveDemo.alarmRule' | translate">
    <input dTextInput [disabled]="true" [(ngModel)]="alarmRule" />
  </d-input-group>
  <d-input-group [prefixContent]="'components.input-group.responsiveDemo.indicatorName' | translate" [spliceType]="'right'">
    <input
      style="width: 240px"
      dTextInput
      [placeholder]="'components.input-group.responsiveDemo.indicatorNamePlaceholder' | translate"
      [(ngModel)]="indicatorName"
    />
  </d-input-group>
  <d-input-group class="time-input-group" [prefixContent]="'time'" [spliceType]="'both'">
    <d-select [(ngModel)]="valueType" [options]="valueTypes"></d-select>
  </d-input-group>
  <d-input-group class="time-input-group" [prefixContent]="comparison" [suffixContent]="'ms'" [spliceType]="'left'">
    <d-select [(ngModel)]="time" [options]="timeOptions"></d-select>
  </d-input-group>
</div>

<ng-template #comparison>
  <div dDropDown appendToBody class="comparison-symbol-box">
    <span dDropDownToggle>{{ comparisonSymbol }}</span>
    <ul dDropDownMenu class="comparison-symbol-list">
      <li *ngFor="let symbol of symbols" (click)="comparisonSymbol = symbol">
        <a dDropDownMenuItem>{{ symbol }}</a>
      </li>
    </ul>
  </div>
</ng-template>
